import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  ref,
  watch,
} from "vue";
import * as echarts from "echarts";
import { formatter } from "element-plus";

interface DataType {
  id: number;
  name: string;
  value: number;
}

const SensorPanel = defineComponent({
  name: "SensorPanel",
  props: {
    data: {
      type: Array as PropType<DataType[]>,
      required: true,
    },
  },
  setup(props, { attrs }) {
    const data = computed(() => props.data);
    let mChart: echarts.EChartsType | null = null;
    const chartRef = ref<null | HTMLDivElement>(null);

    const renderChart = () => {
      const options: any = {
        // X轴展示数据
        xAxis: {
          type: "category",
          // data: data.value.map((item) => item.name),
          data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
          axisLabel: { color: "#fff", fontSize: 10, rotate: 0 },
        },
        // Y轴展示数据
        yAxis: {
          type: "category",
          data: ["DI", "DO"],
          splitArea: {
            show: true,
          },
        },
        // 图标绘制的位置 对应上下左右
        grid: {
          top: 30,
          right: 0,
          bottom: 40,
          left: 0,
          containLabel: true, //计算时包含标签
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          inRange: {
            color: ["#a5f3fc", "#0891b2", "#155e75"],
            symbolSize: [30, 100],
          },
          orient: "horizontal",
          left: "center",
          bottom: "-2%",
          textStyle: {
            color:'white',
            fontSize:10
          },
        },
        // 核心配置
        series: [
          {
            type: "heatmap",
            data: [
              [0, 0, 5],
              [0, 1, 1],
              [0, 2, 4],
              [1, 1, 6],
              [0, 1, 0],
            ].map(function (item) {
              return [item[1], item[0], item[2] || "-"];
            }),
            label: {
              show: true,
            },
          },
        ],
      };
      mChart?.setOption(options);
    };
    onMounted(() => {
      mChart = echarts.init(chartRef.value!);
      renderChart();
    });
    watch(
      () => data,
      () => renderChart(),
      {
        deep: true,
      }
    );
    return () => (
      <>
        <div class="text-center">【DI,DO触发统计】</div>
        <div
          ref={chartRef}
          class={`text-center w-full h-full ${attrs.class}`}
        ></div>
      </>
    );
  },
});

export default SensorPanel;
